import cinemaView from '../views/cinema.art'
import cinemamoudle from '../models/movie'
import cinemalistView from '../views/cinema-list.art'
import cityquView from '../views/choosequ.art'
import detialquView from '../views/detialqu.art'
import brandsView from '../views/brands.art'
import specialView from '../views/special.art'
import serviceView from '../views/service.art'
import cityId  from './moviecontrollers'


const moment = require('moment');
class cinema{
   constructor(){
     this.page='district',
     this.data={},
     this.day=0,
     this.specialId=0,
     this.servicelId=0,
     this.cityId=1
}
  renderer(list){
  let cinemalistHtml=cinemalistView({
    list
  })
  $('.cinema-li').html(cinemalistHtml)
  }
async render(){ 
  let that=this
     let html=cinemaView()
     $('#movie-root').html(html)
     let city=window.localStorage.city
     $('.position').html(`${city}`)
     $('footer li').on('tap',function(){
        location.hash=$(this).attr('data-index')
      })
      $('.show-qu').on('tap',function(){
        $(this).toggleClass('shows').siblings().removeClass('shows')
        $('.list-city').toggle()
       
      })
     
      var cityid=this.cityid=cityId.cathref()
   //  console.log(cityid)
      let now = moment().format();
      let day=this.day = now.substr(0, 10)
   let list=await cinemamoudle.cinemalist(`${day}`,cityid)
  this.renderer(list.cinemas)
      this.handlenav()
      let data=this.data=await cinemamoudle.choosequ(cityid)
       data=data[this.page].subItems
       this.qurenderer(data)
       $('.list-main-left ul li').on('tap',function(){
        $(this).addClass('show-li').siblings().removeClass('show-li')
        let  arr1=data[$(this).index()].subItems
        if(arr1){
          that.choosedetialqu(arr1)
        }        
      })   
      $('.show-brands').on('tap',function(){
        $(this).toggleClass('shows').siblings().removeClass('shows')
        $('.list-brands').toggle()
      //  console.log(that.data.brand.subItems)
        that.brandsrender(that.data.brand.subItems)
      })

      $('.show-special').on('tap',function(){
        $(this).toggleClass('shows').siblings().removeClass('shows')
        $('.list-special').toggle()
           console.log(that.data.hallType.subItems)
        that.specialrender(that.data.hallType.subItems)
        that.servicerender(that.data.service.subItems)

      })
         this.btnrender()
 }

 qurenderer(data){
   let that=this
    let html=cityquView({
      data
    })
    $('.list-main-left ul ').html(html)
    $('.list-main-left ul li').on('tap',function(){
      $(this).addClass('show-li').siblings().removeClass('show-li')
      let  arr1=data[$(this).index()].subItems
      if(arr1){
        that.choosedetialqu(arr1)
      }
       
    }) 
 }

choosedetialqu(data){
  let that=this
  let html=detialquView({
   data
  })
  $('.list-main-right ul ').html(html)
  console.log(this.cityid)
  $('.list-main-right ul li').on('tap',async function(){
 $(this).addClass('active-right').siblings().removeClass('active-right')
     let  Id=$(this).attr('data-id')
     console.log(Id)
     let list=await cinemamoudle.choosecinema(`${that.day}`,Id,that.cityid)
     console.log(list)
     that.renderer(list.cinemas)
     $('.list-city').css('display','none')
  })
  
}

 handlenav(){
    var that=this
   $('.nav-two li').on('tap',function(){
     $(this).addClass('mark').siblings().removeClass('mark')
     that.page= $(this).attr('data-to')
   let  data=that.data[that.page].subItems
   //  console.log(data,1)
      that.qurenderer(data)

   })   
 }
  
brandsrender(list){
  let that=this
let html=brandsView({
 list
})
$('.list-brands ul').html(html)
$('.list-brands ul li').on('tap',async function(){
  $(this).toggleClass('active-brands').siblings().removeClass('active-brands')
  let Id=$(this).attr('data-id')
 // console.log(Id)
  let data=await cinemamoudle.choosebrands(`${that.day}`,Id,-1,-1,that.cityid)
  //   console.log(data)
     that.renderer(data.cinemas)
     $('.list-brands').css('display','none')
})
}

specialrender(list){
  let that=this
let html=specialView({
 list
})
$('.special-box ul').html(html)
$('.special-box ul li').on('tap',async function(){
  $(this).toggleClass('act').siblings().removeClass('act')
   let Id=that.hallId=$(this).attr('data-id')
 //  console.log(Id)
 
})
}
 
servicerender(list){
  let that=this
  let html=serviceView ({
   list
  })
  $('.special-content ul').html(html)
  $('.special-content ul li').on('tap',async function(){
    $(this).toggleClass('act').siblings().removeClass('act')
    let Id=that.servicelId=$(this).attr('data-id')
 //   console.log(Id)
  })
}

btnrender(){
  let that=this
$('.btn1').on('tap',function(){
  $('.list-special ul li:first-child').addClass('act').siblings().removeClass('act')

})
$('.btn2').on('tap',async function(){
  let data=await cinemamoudle.choosebrands(`${that.day}`,-1,that.hallId,that.servicelId,that.cityId)    
  that.renderer(data.cinemas)
  $('.list-special').css('display','none')
   
})
}


}

export default new cinema()

